﻿@{
    Layout = null;
}
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="Generator" content="EditPlus®">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
    <meta name="renderer" content="webkit">
    <title>用户注册</title>
    <link rel="shortcut icon" type="image/x-icon" href="~/theme/icon/favicon.ico">
    <link rel="stylesheet" type="text/css" href="~/theme/css/base.css">
    <link rel="stylesheet" type="text/css" href="~/theme/css/login.css">
    <script src="~/js/jquery-1.9.1.min.js"></script>

</head>
<body>

    <!--- header begin-->
    <header id="pc-header">
        <div class="login-header" style="padding-bottom:0">
            <div><h1><a href="index.html"><img src="~/theme/icon/logo.png"></a></h1></div>
        </div>
    </header>
    <!-- header End -->



    <section id="login-content">
        <div class="login-centre">
            <div class="login-switch clearfix">
                <p class="fr">我已经注册，现在就 <a href="/Home/Login">登录</a></p>
            </div>
            <div class="login-back">
                <div class="H-over">
                    <form>
                        <div class="login-input" >
                            <label><i class="heart">*</i>用户名：</label>
                            <input type="text" class="list-input1" style="width:28%"  id="username" name="info[username]" placeholder="">
                            <span id="userInfo" style="margin-left:2%;color:gray">请不要输入汉字</span>
                        </div>
                        <div class="login-input">
                            <label><i class="heart">*</i>请设置密码：</label>
                            <input type="text" class="list-input" id="password" style="width:28%" name="info[password]" placeholder="">
                            <span id="passInfo" style="margin-left:2%;color:gray">请输入6位以上字符</span>
                        </div>
                        <div class="login-input">
                            <label><i class="heart">*</i>请确认密码：</label>
                            <input type="text" class="list-input" id="repassword" style="width:28%" name="info[password]" placeholder="">
                            <span id="repassInfo" style="margin-left:2%;color:gray">两次密码要输入一致哦</span>
                        </div>
                        <div class="login-input">
                            <label><i class="heart">*</i>手机号：</label>
                            <input type="text" class="list-iphone" id="tel" style="width:28%" name="info[password]" placeholder="">
                            <span id="telInfo" style="margin-left:2%;color:gray">填写下手机号吧，方便我们联系您！</span>
                            <a href="#" class="obtain" id="sendCode">获取短信验证码</a>
                        </div>
                        <div class="login-input">
                            <label><i class="heart">*</i>短信验证码：</label>
                            <input type="text" class="list-notes" id="code" name="info[password]" placeholder="">
                        </div>
                        <div class="item-ifo">
                            <input type="checkbox" onClick="agreeonProtocol();" id="readme" checked="checked" class="checkbox">
                            <label for="protocol">我已阅读并同意<a id="protocol" class="blue" href="#">《悦商城用户协议》</a></label>
                            <span class="clr"></span>
                        </div>
                        <div class="login-button">
                            <a href="#" id="btn">立即注册</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <!--- footer begin-->
    <footer id="footer">
        <div class="containers">
            <div class="w" style="padding-top:30px">
                <div id="footer-2013">
                    <div class="links">
                        <a href="">关于我们</a>
                        |
                        <a href="">联系我们</a>
                        |
                        <a href="">人才招聘</a>
                        |
                        <a href="">商家入驻</a>
                        |
                        <a href="">广告服务</a>
                        |
                        <a href="">手机京东</a>
                        |
                        <a href="">友情链接</a>
                        |
                        <a href="">销售联盟</a>
                        |
                        <a href="">English site</a>
                    </div>
                    <div style="padding-left:10px">
                        <p style="padding-top:10px; padding-bottom:10px; color:#999">网络文化经营许可证：浙网文[2013]0268-027号| 增值电信业务经营许可证：浙B2-20080224-1</p>
                        <p style="padding-bottom:10px; color:#999">信息网络传播视听节目许可证：1109364号 | 互联网违法和不良信息举报电话:0571-81683755</p>
                    </div>
                </div>
            </div>

        </div>
    </footer>
    <!-- footer End -->
</body>
</html>
<script>
    var password = false;
    var repassword = false;
    var username = false;
    var tel = false;
    var code = false;
    $(function () {

       $("#password").blur(function () {
            password = CheckPassword1();
        });
        $("#repassword").blur(function () {
            repassword = CheckPassword2();
        });
        $("#username").blur(function () {
            username = CheckUserName();
        });
        $("#tel").blur(function () {
            tel = CheckUserTel();
        });


        //注册方法
        function Register() {
            if (password && repassword && username) {
                var data = {};
                data.UserName = $("#username").val();
                data.Pwd = $("#password").val();
                data.Phone = $("#tel").val();
                $.ajax({
                    url: "/Login/AddUserInfo",
                    data: data,
                    type: "post",
                    success: function (result) {
                        if (result.Success) {
                            alert("注册成功！");
                            window.location.href = "/Home/Login";
                        }
                        else {
                            alert("注册失败！");
                        }
                    }
                })
            }
        }


        //注册按钮点击事件
        $("#btn").click(function () {
            //检查验证码
            var data = {};
            data.TelPhone = $("#tel").val();
            data.Code = $("#code").val();
            $.ajax({
                url: "/Common/CheckCode",
                type: "post",
                data: data,
                success: function (result) {
                    if (result.Success) {
                        //调用注册方法
                        Register();
                    }
                    else {
                         alert("注册失败！请填入信息！");
                    }
                }
            });
        });


        //发送验证码按钮触发事件
        $("#sendCode").click(function () {
            if (tel) {
                var telphone = $("#tel").val();
                $.ajax({
                    url: "/Common/AddSmsInfo?tel=" + telphone,
                    type: "post",
                    success: function (result) {
                        if (result.Success) {
                            alert("发送成功!");
                            SendCode();
                        }
                        else {
                            alert("发送失败！");
                        }
                    }
                })
            }
        });


        //发送验证码方法
        function SendCode() {
            //禁用
            $("#sendCode").attr("disabled", "disabled");
            $("#sendCode").css("background-color", "gray");
            var time = 60;
            $("#sendCode").val(time + "S之后再发送");
            var timer = setInterval(function () {
                if (time > 0) {
                    time--;
                    $("#sendCode").val(time + "S之后再发送");
                }
                else {
                    $("#sendCode").removeAttr("disabled").css("background-color", "#ff6700");
                    $("#sendCode").val("发送验证码");
                    clearInterval(timer);
                }
            }, 1000);
        }


        //验证手机号是否存在
        function CheckUserTelNull() {
            var data = {};
            data.Phone = $("#tel").val();
            $.ajax({
                url: "/Login/CheckUserTel",
                data: data,
                type: "post",
                success: function (result) {
                    if (result.Success) {
                        $("#telInfo").text("手机号已存在!");
                        $("#telInfo").css("color", "red");
                        tel = false;
                    }
                    else {
                        $("#telInfo").text("成功！");
                        $("#telInfo").css("color", "green");
                        tel = true;
                    }
                }
            })
            return tel;
        }


        //验证用户名是否存在
        function CheckUserNameNull() {
            var data = {};
            data.UserName = $("#username").val();
            $.ajax({
                url: "/Login/CheckUserName",
                data: data,
                type: "post",
                success: function (result) {
                    if (result.Success) {
                        $("#userInfo").text("用户名已存在!");
                        $("#userInfo").css("color", "red");
                        username = false;
                    }
                    else {
                        $("#userInfo").text("成功！");
                        $("#userInfo").css("color", "green");
                        username = true;
                    }
                }
            })
            return username;
        }


        //检查用户名
        function CheckUserName() {
            var username = $("#username").val();
            if (username == "") {
                $("#userInfo").text("用户名不能为空！");
                $("#userInfo").css("color", "red");
                return false;
            }
            var reg = /[\u4E00-\u9FA5]/g;
            if (reg.test(username)) {
                $("#userInfo").text("用户名不能包含汉字！");
                $("#userInfo").css("color", "red");
                return false;
            } else {
                if (CheckUserNameNull()) {
                    $("#userInfo").text("成功!");
                    $("#userInfo").css("color", "green");
                    return true;
                } else {
                    return false;
                }
            }
        }



        //检查密码
        function CheckPassword1() {
            var password = $("#password").val();
            if (password == "") {
                $("#passInfo").text("密码不能为空!");
                $("#passInfo").css("color", "red");
                return false;
            }
            var reg = /^(\w){6,20}$/;
            if (reg.test(password)) {
                $("#passInfo").text("成功!");
                $("#passInfo").css("color", "green");
                return true;
            } else {
                $("#passInfo").text("*只能输入6-20个字母、数字、下划线！");
                $("#passInfo").css("color", "red");
                return false;
            }
        }

        //检查确认密码
        function CheckPassword2() {
            var password1 = $("#repassword").val();
            var password2 = $("#password").val();
            if (password1 == "") {
                $("#repassInfo").text("确认密码不能为空！");
                $("#repassInfo").css("color", "red");
                return false;
            }
            if (password2 != password1) {
                $("#repassInfo").text("两次密码要一致哦！");
                $("#repassInfo").css("color", "red");
                return false;
            } else {
                var reg = /^(\w){6,20}$/;
                if (reg.test(password2)) {
                    $("#repassInfo").text("成功!");
                    $("#repassInfo").css("color", "green");
                    return true;
                } else {
                    $("#repassInfo").text("*只能输入6-20个字母、数字、下划线！");
                    $("#repassInfo").css("color", "red");
                    return false;
                }
            }
        }

        //检查手机号11位
        function CheckUserTel() {
            var tel = $("#tel").val();
            if (tel == "") {
                $("#telInfo").text("手机号不能为空！");
                $("#telInfo").css("color", "red");
                return false;
            }
            var reg = /^1([38]\d|5[0-35-9]|7[3678])\d{8}$/;
            if (reg.test(tel)) {
                $("#telInfo").text("成功！");
                $("#telInfo").css("color", "green");
                if (CheckUserTelNull()) {
                    $("#telInfo").text("成功！");
                    $("#telInfo").css("color", "green");
                    return true;
                }
                else {
                    return false;
                }
            } else {
                $("#telInfo").text("手机号必须为11位1");
                $("#telInfo").css("color", "red");
                return false;
            }
        }
    });
</script>